<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据表格</title>
    <link rel="stylesheet" href="../lib/layui/css/layui.css">
    <style>
        *{
            padding: 0;
            margin: 0;
        }
    </style>
</head>
<body>

    <!-- layui 通过 layui.container 规定版心 -->
    <div class="layui-container">
        <button class="layui-btn">正在热映</button>
        <button class="layui-btn">即将上映</button>
        <button class="layui-btn">top250</button>

        <table id="demo" lay-filter="movieTable"></table>
    </div>
    <script type="text/html" id="opera">
        <button class="layui-btn layui-btn-sm" lay-event="detail">获取{{ d.year }}</button>
        <button class="layui-btn layui-btn-sm" lay-event="edit">修改</button>
        <button class="layui-btn layui-btn-sm" lay-event="del">删除</button>
    </script>
    <script src="../lib/layui/layui.all.js"></script>
    <script>
        /*
            table 数据表格模块
            1. 在页面上渲染table标签 <table id="demo"></table>
            2. 通过 table.render() 方法指定该容器
        */

        // 获取table模块
        var table = layui.table;
        // 执行表单渲染
        var tableEle = table.render({
            elem: '#demo', // DOM元素或者css选择器
            cols: [[ // 表头设置，二维数组，必填项 设置的是 th
                {
                    title: '序号', // 设定列的名称
                    type: 'numbers' // 设定列类型
                },
                {
                    title: "电影名称", // 设定列名称
                    // width: 设定列宽，不写默认适应
                    // edit 是否开启列编辑
                    // style 自定义样式
                    // templet: 自定义模板列
                    // toolbar 绑定工具条列
                    field: 'title' // 定义字段名 key，页面渲染的数据根据此字段名取列表中项的值
                },
                {
                    title: '电影时长',
                    field: 'longtime',
                },
                {
                    title: '导演',
                    field: 'director',
                },
                {
                    title: '编剧',
                    field: 'scriptwriter'
                },
                {
                    title: '操作',
                    // 1. 直接写html代码字符串，内容需要包含在div标签内  通过 {{ d.xx }} 获取行内绑定的数据
                    // 通过lay-event绑定行工具事件
                    width: 250,
                    toolbar: `<div>
                        <button class="layui-btn layui-btn-sm" lay-event="detail">获取{{d.year}}</button>
                        <button class="layui-btn layui-btn-sm" lay-event="edit">修改</button>
                        <button class="layui-btn layui-btn-sm" lay-event="del">删除</button>
                    </div>`,
                    // 2. 使用 script 标签规定html代码
                    // toolbar: '#opera'
                }
            ]],
            url: 'http://www.bufantec.com/api/douban/movie/in_theaters', // 往哪里发送请求，获取数据
            method: 'get', // 请求的方式， 默认为get
            // where // 发送其他参数
            // contentType: 'json' 发送数据的类型，post请求常用
            // headers 设置请求头，如果数据需要身份验证或者post请求使用
            parseData(res) { // 数据格式解析的回调函数，默认接受一个参数：后台返回的数据（解析成对象了）
                console.log(res);
                return {
                    'code': 0, //解析接口状态
                    'msg': "write no limit", //解析提示文本
                    'count': res.data.totalRow, //解析数据长度
                    'data': res.data.list // 解析数据列表
                };
            },
            request: {
                // 用于对分页请求的参数：page、limit重新设定名称
                pageName: 'start', // 页码的参数名称，默认：page
                // limitName: 'limit' // 每页数据量的参数名，默认：limit
            },
            // toolbar: 'default', // 头部工具栏
            // width/height: 指定表格的宽高
            done() {
                // 数据渲染完成后的回调函数
                console.log('请求数据完成后执行的内容');
            },
            data: [], // 如果数据是本地数据，可以直接将数据赋值给data
            // page: true/false 是否开启分页
            page: {
                limit: 5, // 每页显示的数量,一般设置为limits的第0项
                limits: [5 ,10, 15] // 每页可选的显示的数量的集合
            },
            // limit/limits: 同上，只不过没在page中写
            // loading: 加载数据的动画，默认开启
            text: "没有数据，或者请求错误", // 没有数据的提示文本
            id: 'tableDemo' // 设置渲染出来的表格的标识符
        })

        /* 表格重载  table.reload({改变的设置})，重载哪个表格
            1. id  table.reload(ID, { 设置 })
            2. 返回值  var tableEle = table.render()  tableEle.reload({ 设置 })
        */

        var btns = document.querySelectorAll('button');
        btns[0].onclick = function () {
            table.reload('tableDemo', {
                url: 'http://www.bufantec.com/api/douban/movie/in_theaters'
            })
        }

        btns[1].onclick = function ()  {
            tableEle.reload({
                url: 'http://www.bufantec.com/api/douban/movie/coming_soon'
            })
        }

        //监听工具条 
        table.on('tool(movieTable)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
            
            if(layEvent === 'detail'){ //查看
                //do somehing
                console.log('点击了detail');
                layer.open({
                    type: 1,
                    content: `<img src="${data.small}">`
                })
            } else if(layEvent === 'del'){ //删除
                layer.confirm('真的删除行么', function(index){
                obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                layer.close(index);
                //向服务端发送删除指令
                });
            } else if(layEvent === 'edit'){ //编辑
                console.log('点击了编辑按钮');
                //同步更新缓存对应的值
                obj.update({
                    longtime: 2019,
                });
            }
        });

    </script>
</body>
</html>